<template>
  <div class="full-player" v-show="show">
    <!-- 背景图 -->
    <div class="player-bg">
      <img :src="currentPlaySong.picUrl" alt="" />
    </div>
    <div class="player-header">
      <van-icon class-prefix="my-icon" name="down" @click="togglePlayer"></van-icon>
      <h1 v-html="currentPlaySong.name"></h1>
    </div>
    <h1 class="player-author" v-html="currentPlaySong.author"></h1>
    <!-- 旋转大头像 -->
    <div
      class="player-middle"
      @touchstart.prevent="middleTouchStart"
      @touchmove.prevent="middleTouchMove"
      @touchend="middleTouchEnd"
    >
      <img :class="playImg" :src="currentPlaySong.picUrl" />
      <p :class="playImgTxt" class="cd-lyric">{{ lyricIndexTxt }}</p>
      <!-- <van-scroll class="player-middle-scroll" ref="lyricList" @init="init"> -->
      <van-scroll class="player-middle-scroll" ref="lyricList">
        <div style="width: 80%; margin: 0 auto">
          <div v-if="lyric">
            <p
              :ref="lyricLine"
              class="text"
              :class="{ current: lyricIndex == index }"
              v-for="(line, index) in lyric.lines"
              :key="index"
            >
              {{ line.txt }}
            </p>
          </div>
        </div>
      </van-scroll>
    </div>
    <!-- 播放进度条 -->
    <div class="player-progress">
      <span class="ctime">{{ ctime }}</span>
      <van-slider
        v-model="sliderPercent"
        class="slider"
        bar-height="4px"
        button-size="10px"
        :max="audioTotalTime"
        active-color="#ec4141"
        @change="onSliderChange"
      ></van-slider>
      <span class="dtime">{{ dtime }}</span>
    </div>
    <!-- 控制按钮栏 -->
    <div class="player-control">
      <span @click="changePlayMode">
        <van-icon v-if="currentPlayMode === 2" class-prefix="my-icon" name="random"></van-icon>
        <van-icon v-if="currentPlayMode === 0" class-prefix="my-icon" name="loop"></van-icon>
        <van-icon v-if="currentPlayMode === 1" class-prefix="my-icon" name="singlecycle"></van-icon>
      </span>
      <span @click="playPrevSong">
        <van-icon class-prefix="my-icon" name="previous"></van-icon>
      </span>
      <span @click="togglePlayState">
        <van-icon v-if="audioPlayState" class-prefix="my-icon" name="play"></van-icon>
        <van-icon v-if="!audioPlayState" class-prefix="my-icon" name="timeout"></van-icon>
      </span>
      <span @click="playNextSong"><van-icon class-prefix="my-icon" name="nextsong"></van-icon></span>
      <span @click="toggleMenuShow"><van-icon class-prefix="my-icon" name="musiclist"></van-icon></span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed, nextTick } from 'vue';
import VanScroll from '@/components/scroll/Scroll.vue';
import { init, scrollTo, scrollToElement } from '@/components/scroll/scroll';
// stores
import { useMyStores } from '@/store';
import { format } from '@/assets/js/util';

defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits([
  'togglePlayState',
  'changePlayMode',
  'playPrevSong',
  'playNextSong',
  'changePlayTime',
  'toggleMenuShow'
]);
const {
  playerStore,
  audioPlayTime,
  audioTotalTime,
  audioPlayState,
  currentPlaySong,
  currentPlayMode,
  lyric,
  lyricIndex,
  lyricIndexTxt
} = useMyStores();

/**
 * 事件处理
 */
const togglePlayer = () => {
  playerStore.SET_MINI_PLAYER(true);
  playerStore.SET_FULL_PLAYER(false);
};
const togglePlayState = () => {
  emit('togglePlayState');
};
const changePlayMode = () => {
  emit('changePlayMode');
};
const playPrevSong = () => {
  emit('playPrevSong');
};
const playNextSong = () => {
  emit('playNextSong');
};
const toggleMenuShow = () => {
  emit('toggleMenuShow');
};

// 进度条
const ctime = computed(() => format(audioPlayTime.value));
const dtime = computed(() => format(audioTotalTime.value));
const sliderPercent = computed(() => audioPlayTime.value);
const onSliderChange = (val: number) => {
  console.log(val);
  emit('changePlayTime', val);
};

// 触摸事件
let touch: any = {};
const currentShow = ref<number>(0);
const middleTouchStart = (e: any) => {
  touch.initiated = true;
  touch.moved = false;
  const touche = e.touches[0];
  touch.startX = touche.pageX;
  touch.startY = touche.pageY;
};
const middleTouchMove = (e: any) => {
  if (!touch.initiated) {
    return;
  }
  const touche = e.touches[0];
  const deltaX = touche.pageX - touch.startX;
  const deltaY = touche.pageY - touch.startY;
  // 上下滑动大于左右滑动判定为上下滑动
  if (Math.abs(deltaY) > Math.abs(deltaX)) {
    return;
  }
  if (!touch.moved) {
    touch.moved = true;
  }
  /* 判断滑动方向 */
  if (deltaX > 0) {
    // 向右滑动//在歌词界面进行
    if (currentShow.value === 1) {
      touch.toChange = Math.abs(deltaX) > 40 ? 'NO' : 'OK';
    } else {
      return '';
    }
  } else {
    // 向左滑动//在CD界面进行
    if (currentShow.value === 0) {
      touch.toChange = Math.abs(deltaX) > 40 ? 'OK' : 'NO'; // 如果滑动距离大判定为滑动事件
    } else {
      return '';
    }
  }
};
const middleTouchEnd = (e: any) => {
  if (!touch.moved) {
    return;
  }
  if (touch.toChange === 'OK') {
    lyricList.value.$el.style.transform = `translate3d(0,0,0)`;
    currentShow.value = 1;
  } else {
    lyricList.value.$el.style.transform = `translate3d(100%,0,0)`;
    currentShow.value = 0;
  }
  // console.log('currentShow:' + currentShow.value);
};

// 滚动图片歌词的样式
const playImg = computed(() => {
  const class1 = audioPlayState.value ? 'playStart' : 'playStop';
  const class2 = currentShow.value === 1 ? 'playHide' : '';
  return `${class1} ${class2}`;
});
const playImgTxt = computed(() => {
  const class2 = currentShow.value === 1 ? 'playHide' : '';
  return `${class2}`;
});

// 歌词的滚动处理
const lyricList = ref();
const lyricLines = ref<Array<any>>([]);
const lyricLine = (el: any) => {
  lyricLines.value.push(el);
};
// 简听歌词变化，刷新滚动区域
watch(lyric, () => {
  nextTick(() => {
    lyricList.value.refresh();
  });
});
// 简听歌词索引的变化，进行滚动
watch(lyricIndex, newVal => {
  if (newVal > 5) {
    let lineEl = lyricLines.value[newVal - 5];
    lyricList.value.scrollToElement(lineEl, 200);
  } else {
    lyricList.value.scrollTo(0, 0, 200);
  }
});
</script>

<style lang="less" scoped>
.full-player {
  background: rgb(34, 34, 34);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 400;
  overflow: hidden;
  .player-bg {
    opacity: 0.6;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    filter: blur(20px);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .player-header {
    width: 100%;
    background-size: 100% auto;
    position: relative;
    transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
    i {
      font-size: 30px;
      position: absolute;
      top: 5px;
      left: 15px;
    }
    h1 {
      width: 70%;
      height: 45px;
      margin: auto;
      overflow: hidden;
      text-align: center;
      line-height: 45px;
      font-size: 16px;
    }
  }
  .player-author {
    width: 60%;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    font-size: 15px;
    text-align: center;
  }
  // 旋转大图像
  .player-middle {
    width: 100%;
    height: 64%;
    text-align: center;
    overflow: hidden;
    position: relative;
    img {
      width: 300px;
      height: 300px;
      border-radius: 300px;
      border: 10px solid hsla(0, 0%, 100%, 0.1);
      opacity: 1;
      transition: all 0.5s;
    }
    img.playStart {
      animation: rotate 20s linear infinite;
      animation-play-state: running;
      -webkit-animation-play-state: running;
    }
    img.playStop {
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
    }
    .playHide {
      opacity: 0;
      transition: all 0.5s;
    }
    .cd-lyric {
      width: 80%;
      margin: 0 auto;
      height: 40px;
      margin-top: 5%;
      overflow: hidden;
      text-align: center;
      color: rgba(255, 255, 255, 0.808);
      font-size: 16px;
      line-height: 32px;
    }
    .text {
      overflow: hidden;
      line-height: 28px;
      color: hsla(0, 0%, 100%, 0.5);
      font-size: 13px;
      text-align: left;
    }
    .current {
      color: #fff;
      font-size: 15px;
    }
    .player-middle-scroll {
      width: 100%;
      // height: 64%;
      height: 100%;
      float: left;
      transform: translate3d(375px, 0, 0);
      position: absolute;
      top: 0;
    }
  }
  .player-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 5px;
    span {
      margin-top: 3px;
      letter-spacing: 1px;
    }
    .ctime {
      padding-right: 12px;
    }
    .dtime {
      padding-left: 12px;
    }
    .slider {
      width: 60%;
    }
  }
  /* 底部按钮控制栏 */
  .player-control {
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    padding: 0 38px;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
    position: absolute;
    bottom: 30px;
  }
}
/* 唱片旋转 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
